var totalPage = Math.ceil(data.length/6);
var lastPage = 1;
var curPage = 1;

/*goto page -----------------*/
var toPage = function (pageId) {
	lastPage = curPage;
	curPage = pageId;
	$('#scroll-screen').css('-webkit-transform', 'translate3d(' + -(curPage - 1) * 1028 + 'px, 0, 0)');
	PageSelect(lastPage).css('background-position-y', '0');
	PageSelect(curPage).css('background-position-y', '-52px');
}

function init_menu() {
    $('#scroll-screen').touchwipe({
        wipeLeft: function() { toPage(curPage == totalPage ? 1 : curPage + 1); },
        wipeRight: function() { toPage(curPage == 1 ? totalPage : curPage - 1); },
        wipeUp: function() { toPage(curPage == totalPage ? 1 : curPage + 1); },
        wipeDown: function() { toPage(curPage == 1 ? totalPage : curPage - 1); },
        min_move_x: 20,
        min_move_y: 20,
        preventDefaultEvents: true
    });
	//*click pageNext----------------------*/
	$('.pageNext').click(function clickPageNext(){
		var audio = new Audio();
		audio.src = "sound/ClickPage.mp3";
		audio.play();
		$('.pageNext').css('-webkit-transform', 'scale(2,2)')
		var t=setTimeout(function(){$('.pageNext').css('-webkit-transform', 'scale(1,1)')},400)
	});
	
	//*click pageBack----------------------*/
	$('.pageBack').click(function clickPageBack(){
		var audio = new Audio();
		audio.src = "sound/ClickPage.mp3";
		audio.play();
		$('.pageBack').css('-webkit-transform', 'scale(2,2)')
		var t=setTimeout(function(){$('.pageBack').css('-webkit-transform', 'scale(1,1)')},400)
	});
	
	//*click pageLoad----------------------*/
	$('.pageload').click(function clickPage(){
		var audio = new Audio();
		audio.src = "sound/ClickPage.mp3";
		audio.play();
	});

	/*fix width --------------------*/
	$('#scroll-screen').ready(function () {
		$('#scroll-screen').width((totalPage + 1) * 1028);
	});

	/*load web content --------------*/
	$('.pageLoad').ready(function () {
		for (var i = 1; i <= totalPage; i++) {
			/*load page*/
			PageSelect(i);
		};
		setTimeout(function(){
	        var s = new Screen(data);
	    },500);
	});
	$('.page').ready(function () {
		toPage(curPage);
	});

	/*goto next,back -----------------*/
	$('.pageBack').click(function () {
		toPage(curPage == 1 ? totalPage : curPage - 1);
	});

	$('.pageNext').click(function () {
		toPage(curPage == totalPage ? 1 : curPage + 1);
	});
}

/*page select --------------*/
var PageSelect = function (i) {
	if ($('.pageSelect' + i).length > 0)
		return $('.pageSelect' + i);
	else {
		$('.pageLoad').append('<div class="pageSelect' + i + '" onclick="toPage(' + i + ')"></div>');
		$('.pageSelect' + i).css('background-position-x', -(i - 1) * 52 + 'px');
		$('.pageSelect' + i).css('background-position-y', '0');
		$('.pageSelect' + i).css('background-image', 'url(images/choose/page.png)');
		$('.pageSelect' + i).css('background-repeat', 'no-repeat');
		$('.pageSelect' + i).css('height', '50px');
		$('.pageSelect' + i).css('width', '50px');
		$('.pageSelect' + i).css('display', 'inline-block');
	}
};

/*scroll-screen -------------*/
var Screen = function (data) {
    var i = 1;
    $('#scroll-screen').append('<div class="item" id="item-'+i+'"></div>');
	for (var j = 0; j < data.length; j++) {
	    if (j%6==0&&j>0){
	        i++;
	        $('#scroll-screen').append('<div class="item" id="item-'+i+'"></div>');
	    }
	    var textSay = data[j].textSay;
	    var textQ = data[j].textQ;
	    if(data[j].status!='lock'){
    	    var text = data[j].text;
    	    var img = data[j].picture;
	    }
	    else{
	        var text = 'Lock';
            var img = 'images/Choose/lock.png';
	    }
	    $('#item-'+i).append('<div class="border">'
	            + '<div class="star">'
	            + '<div class="star-item" id="star1-'+j+'"></div>'
	            + '<div class="star-item" id="star2-'+j+'"></div>'
	            + '<div class="star-item" id="star3-'+j+'"></div>'
	            + '</div>'
	            + '<img class="picture" textSay="'+textSay+'" textQ="'+textQ+'" text="'+text+'" status="'+data[j].status+'" width="200px" height="151px" onclick="clickBorder(event)" src="'+img+'"/>'
	            + '<div class="text_item">'+text+'</div>'
				+ '</div>');
				
		//*set star --------------------------*/	
				for(var k=1;k<=data[j].star;k++)
				{
					$('#star'+k+'-'+j).css('background-position-y', '0px')
				}	
		}
};

//*click item----------------------*/
function clickBorder(event){
    if($(event.target).attr('status')!='lock'){
        $('.border').css('opacity',0)
        $('.pageNext').css('-webkit-transform','translateX(250px)  rotate(1800deg)')
        $('.pageBack').css('-webkit-transform','translateX(-250px)  rotate(-1800deg)')  
        for(var i=0;i<=totalPage;i++){
            $('.pageSelect'+i+'').css('-webkit-transition','5000ms ease-out').css('-webkit-transform','rotate('+(360-(90*i))+'deg) translate3d(-500px, '+(-700-(400*i))+'px, 0)');
        }
        $('.back').css('-webkit-transform','translateX(200px) rotate(180deg)');
        $("#stage").css('-webkit-opacity','0.0');
        text=$(event.target).attr('text');
        img=$(event.target).attr('src');
        textQ=$(event.target).attr('textQ');
        textSay=$(event.target).attr('textSay');
        var t=setTimeout(function(){
            menu.clear();
            play.create();
            },1000);
    }
    else{
        alert("Chưa được mở");
    }
}